
if(!window.BertaTemplate) window.BertaTemplate = {};

BertaTemplate.SlideshowGallery = function(elements, options) {
	var self = this;
	this._ = function(callback, params) { var self = this; return function() { return callback.call(self, arguments, params); }; };
	this.options = jQuery.extend(true, {
		type: 'slideshow',
		imagesContClass: '.article-gallery-images',
		navContClass: '.article-gallery-nav',
		pagesClass: '.article-gallery-pages',
		prevLinkClass: '.article-gallery-prev',
		nextLinkClass: '.article-gallery-next',
		captionsContClass: '.article-gallery-captions',
		
		showNumbers: true,
		showNextPrev: true,
		autoPlay: true,
		clickToAdvance: true,
		
		// callbacks
		transitionStart: null,
		transitionEnd: null,
		
		cycle: { 
		    speed:   300, 
		    timeout: 4000,
			containerResize: false,

			pagerAnchorBuilder: function(idx, slide) {
                return '<a href="#"><span>' + (idx + 1) + '</span></a>';
			}
		}
	}, options);
	
	
	this.add = function(el) {
		//console.debug('add', el);
		el = $(el);
		var c = jQuery.extend({}, this.options.cycle);
		
		var imCont = el.find(self.options.imagesContClass);
		var numItems = imCont.children().length;
		//console.debug(numItems);
		if(numItems > 1) {
			// navigation
			var navCont = el.find(this.options.navContClass);
			if(this.options.showNextPrev) {
				c.prev = el.find(this.options.prevLinkClass);
				c.next = el.find(this.options.nextLinkClass);
				navCont.removeClass('hidden');
			} else {
				el.find(this.options.prevLinkClass).addClass('hidden');
				el.find(this.options.nextLinkClass).addClass('hidden');
			}
			
			// pager
			if(this.options.showNumbers) {
				c.pager = el.find(this.options.pagesClass);
				navCont.removeClass('x-hidden');
			} else {
				el.find(this.options.pagesClass).addClass('hidden');
			}
			
			c.before = self._(cycle_onBeforeSlide, el);
			c.after = self._(cycle_onAfterSlide, el);
			imCont.cycle(c)
				  .cycle('pause');
			if(!this.options.autoPlay) imCont.cycle('pause');
			if(this.options.clickToAdvance) imCont.bind('click.SlideshowGallery', onContainerClick);
			el.addClass('article-gallery-cycle');
		}
		
		el.data({ galleryAdded: true, currentWidth: imCont.width(), currentHeight: imCont.height() });
	}
	
	this.remove = function(el) {
		//console.debug('remove', el);
		el = $(el);
		var d = el.data();
		if(d && d.galleryAdded) {
			var imCont = el.find(this.options.imagesContClass);
			if(imCont) {
				imCont.cycle('destroy');
				imCont.unbind('.SlideshowGallery');
			}
		}
	}
	
	
	
	
	
	elements.each(function(idx, el) {
		self.add(el);
	});
	
	
	
	
	function onContainerClick(event) {
		$(this).cycle('next');
	}
	
	function cycle_onBeforeSlide(args, galleryEl) {
		//$.log("cycle_onBeforeSlide", args);
		galleryEl.find(self.options.captionsContClass).empty();
		
		var data = galleryEl.data();
		
		// update width and height
		var nextEl = $(args[1]);
		if(nextEl.height() > 0 && nextEl.height() != data.currentHeight) {
			galleryEl.data('currentHeight', data.currentHeight = nextEl.height())
			galleryEl.find(self.options.imagesContClass).animate({
				'height': data.currentHeight
			}, 100);
		}
		if(nextEl.width() > 0 && nextEl.width() != data.currentWidth) {
			galleryEl.data('currentWidth', data.currentWidth = nextEl.width())
			galleryEl.find(self.options.imagesContClass).animate({
				'width': data.currentWidth
			}, 100);
		}
		
		
		!self.options.transitionStart || self.options.transitionStart(args[0], args[1], galleryEl);
	}
	function cycle_onAfterSlide(args, galleryEl) {
		//$.log("cycle_onAfterSlide", args);
		var data = galleryEl.data();
		
		// update caption
		galleryEl.find(self.options.captionsContClass)
				 .html($(args[1]).attr('title'));
		
		if(!args[2].addSlide) {	// options.addSlide
			 // if this is the very first image of all slideshow, then change position to relative
			 // to display it. if the position remains "absolute", then the container doesn't take
			 // the right size to show all of the image.
			 $(args[1]).css('position', 'relative');
		}
		
		// Webkit hack - if cycle had to requeue because some images were not loaded
		args[2].$cont.cycle('pause');
		
		!self.options.transitionEnd || self.options.transitionEnd(args[0], args[1], galleryEl);
	}
	
	
};
